<template>
    <div class="img_main_box">
        <img id="plan" :src="url" alt="">
    </div>
</template>

<script setup lang="ts">
import '@recogito/annotorious/dist/annotorious.min.css'
import {Annotorious}                   from '@recogito/annotorious'
import {defineEmits, onMounted, watch} from "vue"
import {CommentInput}                  from "./CommentInput"

const emits = defineEmits(["overlaysChange"])

let anno: any = null
const props   = defineProps({
    overlayList   : Array,
    currentOverlay: String,
    url           : String
})

// 用于排序(ps:框架排序会混乱)
let index = 0

function initAnno() {
    // 创建Annotorious实例并初始化
    anno = new Annotorious({
        image        : document.getElementById('plan'),
        allowEmpty   : true,
        disableEditor: false,
        handleRadius : 1,
        locale       : 'zh-CN',
        widgets      : [CommentInput],

    })

    anno.loadAnnotations('annotations.w3c.json')

    // 新建标注
    anno.on('createAnnotation', (annotation: any, overrideId: any) => {
        annotation.index   = index++
        // 获取所有标注
        let allAnnotations = anno.getAnnotations()
        emits("overlaysChange", allAnnotations)
    })

    // 删除标注
    anno.on('deleteAnnotation', function () {
        let allAnnotations = anno.getAnnotations()
        emits("overlaysChange", allAnnotations)
    });

    // 更新标注
    anno.on('updateAnnotation', function () {
        let allAnnotations = anno.getAnnotations()
        emits("overlaysChange", allAnnotations)
    });

}

// 处理数据,只提取需要的数据 todombb 写完这个模块,并删除旧的目录结构
function handleRestAnnotationData() {
    if (!(props.overlayList && props.overlayList instanceof Array)) {
        return
    }

    const newAnnotationData = props.overlayList.map((item, index) => {
        let selectorValueResult     = null
        const selectorValue         = item.target?.selector?.value
        const selectorID            = item.id
        const regex                 = /xywh=pixel:/i
        const newSelectorValue      = selectorValue.replace(regex, '')
        const newSelectorValueArray = newSelectorValue.split(',')
        selectorValueResult         = {
            index      : index + 1,
            id         : selectorID,
            xywh       : newSelectorValueArray,
            styleObject: {
                width              : newSelectorValueArray[2] + 'px',
                height             : newSelectorValueArray[3] + 'px',
                backgroundPositionX: `-${newSelectorValueArray[0]}px`,
                backgroundPositionY: `-${newSelectorValueArray[1]}px`
            },
            title      : '可乐'
        }
        return selectorValueResult
    })
    return newAnnotationData
}

// 点击联动
watch(() => props.currentOverlay, (newVal: any, oldVal: any) => {
    anno.selectAnnotation(newVal)
})

onMounted(() => {
    initAnno()
})
</script>

<style scoped lang="scss">
.img_main_box {
    height: 100%;
    display: flex;
    justify-content: center;

    img {
        max-height: 100%;
        max-width: 100%;
    }
}

</style>
